<template>
  <div>
    <el-row type="flex" class="goodsctn" justify="center">
      <el-col :span="18">
        <el-form :model="form">
          <el-row>
            <el-col :span="11">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="文章作者" :label-width="formLabelWidth">
                    <el-input
                      v-model="form.author_name"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item label="文章分类" :label-width="formLabelWidth">
                    <el-select
                      style="width:100%"
                      v-model="form.ac_id"
                      placeholder="请选择文章分类"
                    >
                      <el-option
                        :label="i.name"
                        :value="i.ac_id"
                        v-for="(i, item) in classinfo"
                        :key="item"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="是否原创" :label-width="formLabelWidth">
                    <el-select
                      style="width:100%"
                      v-model="form.original"
                      placeholder="是否原创"
                    >
                      <el-option label="是" :value="1"></el-option>
                      <el-option label="否" :value="0"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="11">
              <el-form-item label="上传封面" :label-width="formLabelWidth">
                <div class="imgctn">
                  <input
                    type="file"
                    id="upload"
                    name="img"
                    style="display:none"
                    @change="getimg"
                  />
                  <div
                    class="el-upload el-upload--picture-card"
                    @click="coverck"
                  >
                    <div>
                      <i slot="default" class="el-icon-plus"></i>
                    </div>
                  </div>
                  <div
                    class="el-upload--picture-card"
                    v-for="(src, x) in coversrc"
                    :key="x"
                  >
                    <span class="close" @click="coverclose(x)">
                      <i class="el-icon-delete"></i>
                    </span>
                    <el-image
                      :src="src"
                      fit="cover"
                      style="width:100%;height: 100%"
                    ></el-image>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="22"
              ><el-form-item label="文章标题" :label-width="formLabelWidth">
                <el-input
                  v-model="form.title"
                  autocomplete="off"
                ></el-input> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="编辑文本" :label-width="formLabelWidth">
                <!-- <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="form.content"
                >
                </el-input> -->
                <el-card style="height: 350px;">
                  <quill-editor
                    v-model="form.content"
                    ref="myQuillEditor"
                    style="height: 200px;"
                    :options="editorOption"
                  >
                  </quill-editor>
                </el-card>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <div class="btngrp">
                <el-button>取 消</el-button>
                <el-button
                  type="primary"
                  @click="ok"
                  v-if="this.$route.query.id != null"
                  >修 改</el-button
                >
                <el-button type="primary" @click="ok" v-else>添 加</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import axios from "axios";
import Config from "@/config/app";
import { getarticleclass } from "@/api/article/article.js";
import { addarticle } from "@/api/article/article.js";
import { updatearticle } from "@/api/article/article.js";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      tableData: [],
      form: {
        title: "",
        author_name: "",
        ac_id: "",
        original: "",
        content: ""
      },
      formLabelWidth: "100px",
      classinfo: [],
      editorOption: {},
      coversrc: [],
      uploadcoversrc: []
    };
  },
  created() {
    if (this.$info().role != "0") {
      this.$message({
        type: "info",
        message: "权限不足!请联系管理员！"
      });
      this.$router.push({ path: "/goodsrelease" });
    }
    var that = this;
    that.requestclass();
    console.log(that.$route.query.id);
    if (sessionStorage.getItem("editrow") != null) {
      that.form = JSON.parse(sessionStorage.getItem("editrow"));
      that.coversrc.push(JSON.parse(sessionStorage.getItem("editrow")).img);
      console.log(that.form);
      console.log(that.coversrc);
      that.uploadcoversrc = [];
      console.log(that.uploadcoversrc);
    }
  },
  methods: {
    ok() {
      var that = this;
      if (this.$route.query.id == null) {
        console.log("添加");
        that.requestadd();
      } else {
        console.log("修改");
        that.requestupdate();
      }
    },
    requestadd() {
      var that = this,
        f = that.form,
        data = {
          title: f.title,
          author_name: f.author_name,
          ac_id: f.ac_id,
          original: f.original,
          content: f.content,
          img: that.uploadcoversrc[0]
        };
      console.log(data);
      addarticle(data).then(
        function(res) {
          console.log(res);
          that.$router.push({
            path: "/article",
            query: {}
          });
          that.$message({
            type: "success",
            message: "添加成功！"
          });
        },
        function() {
          this.$message({
            type: "info",
            message: "添加失败！"
          });
        }
      );
    },
    requestupdate() {
      var that = this,
        f = that.form,
        data = {
          field: "a_id",
          value: that.$route.query.id,
          title: f.title,
          auther_name: f.author_name,
          orginal: f.original,
          content: f.content,
          img: that.uploadcoversrc[0]
        };
      if (that.uploadcoversrc.length == 0) {
        data = {
          field: "a_id",
          value: that.$route.query.id,
          title: f.title,
          auther_name: f.author_name,
          orginal: f.original,
          content: f.content
        };
      }
      console.log(data);
      updatearticle(data).then(
        function() {
          that.$router.push({
            path: "/article",
            query: {}
          });
          that.$message({
            type: "success",
            message: "修改成功！"
          });
        },
        function() {
          this.$message({
            type: "info",
            message: "修改失败！"
          });
        }
      );
    },
    //------------------------------------------------------
    //封面开始
    coverck() {
      if (this.coversrc.length == 0) {
        document.getElementById("upload").click();
      } else {
        this.$message({
          type: "error",
          message: "封面只可以上传一张"
        });
      }
    },
    getimg(e) {
      var str = [];
      var file = e.target.files;
      var arr = 0;
      // eslint-disable-next-line no-unused-vars
      for (let i in file) {
        arr++;
      }
      arr = arr - 3;
      var zero = 0;
      while (zero <= arr) {
        str.push(window.URL.createObjectURL(file[zero]));
        zero++;
      }
      this.coversrc = str;
      var that = this;
      const config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      e.target.files.forEach(file => {
        let formData = new FormData();
        formData.append("uploadfile_ant", file);
        axios
          .post(Config.apiUrl + "front/index/upload", formData, config)
          .then(function(res) {
            console.log(res.data);
            that.uploadcoversrc.push(res.data);
            that.$message({
              type: "success",
              message: "上传成功!"
            });
          })
          .catch(function(error) {
            console.log(error);
            that.$message({
              type: "info",
              message: "上传错误!"
            });
          });
      });
      console.log(that.coversrc);
    },
    coverclose(id) {
      this.coversrc.splice(id, 1);
      this.uploadcoversrc.splice(id, 1);
      console.log(this.coversrc);
      console.log(this.uploadcoversrc);
    },
    requestclass() {
      var that = this,
        data = {
          field: "ac_id",
          op: ">",
          value: "0"
        };
      getarticleclass(data).then(res => {
        console.log(res);
        that.classinfo = res;
      });
    }
  }
};
</script>

<style scoped>
.goodsctn {
  margin: 20px 0;
}
.btngrp {
  float: right;
}
.imgctn {
  width: 100%;
}
.el-form-item__content {
  display: flex;
  flex-wrap: wrap;
  vertical-align: middle;
}
.el-upload--picture-card {
  margin: 1%;
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.close {
  opacity: 0;
  transition: opacity 0.3s;
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s;
}
.el-upload--picture-card:hover .close {
  opacity: 1;
}
.close > i {
  margin: auto;
}
</style>
